<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/rbac-server/rbac/system/page"
    :query-type="queryFormType"
    :change-load="true"
  >
    <template #title>{{ t('rbac.system.title') }}</template>
    <template #query="{ data }">
      <el-form-item :label="t('rbac.system.sysState')">
        <el-radio-group v-model="data.sysState.value">
          <el-radio value="">{{ t('rbac.system.all') }}</el-radio>
          <el-radio value="0">{{ t('rbac.system.disable') }}</el-radio>
          <el-radio value="1">{{ t('rbac.system.enable') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="t('rbac.system.sysDisplay')">
        <el-radio-group v-model="data.sysDisplay.value">
          <el-radio value="">{{ t('rbac.system.all') }}</el-radio>
          <el-radio value="0">{{ t('rbac.system.hide') }}</el-radio>
          <el-radio value="1">{{ t('rbac.system.display') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <template v-if="row">
        <el-button v-hasPermi="'update'" @click="update(row.id)" type="primary">{{
          t('common.update')
        }}</el-button>
        <el-button v-hasPermi="'delete'" @click="del(row.id)" type="danger">{{
          t('common.delete')
        }}</el-button>
        <el-button v-hasPermi="'sort'" @click="sort(row.id, 1)" type="success">{{
          t('rbac.system.up')
        }}</el-button>
        <el-button v-hasPermi="'sort'" @click="sort(row.id, 0)" type="info">{{
          t('rbac.system.down')
        }}</el-button>
      </template>
    </template>
    <template #column>
      <el-table-column prop="sysState" :label="t('rbac.system.sysState')" width="70">
        <template #default="scope">
          <template v-if="scope.row.sysState">
            <el-tag effect="dark" type="success">{{ t('rbac.system.enable') }}</el-tag>
          </template>
          <template v-else>
            <el-tag effect="dark" type="danger">{{ t('rbac.system.disable') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="sysDisplay"
        :label="t('rbac.system.sysDisplay')"
        width="100"
        align="center"
      >
        <template #default="scope">
          <template v-if="scope.row.sysDisplay">
            <el-tag effect="light" type="success">{{ t('rbac.system.display') }}</el-tag>
          </template>
          <template v-else>
            <el-tag effect="light" type="danger">{{ t('rbac.system.hide') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="sysName" :label="t('rbac.system.sysName')" width="180">
        <template #default="scope">
          <template v-if="scope.row.sysIcon">
            <Icon
              :icon="scope.row.sysIcon"
              :color="scope.row.iconColor"
              :hoverColor="scope.row.iconColor"
            />
            {{ t(scope.row.sysName) }}
          </template>
          <template v-else>
            {{ t(scope.row.sysName) }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="note" :label="t('rbac.system.note')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    :init-data="initData"
    submit-url="/rbac-server/rbac/system/add"
    label-width="100px"
    :title="t('rbac.system.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="sysName" :label="t('rbac.system.sysName')">
            <el-input v-model="form.sysName" :placeholder="t('rbac.system.sysName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="sysIcon" :label="t('rbac.system.sysIcon')">
            <el-input v-model="form.sysIcon" :placeholder="t('rbac.system.sysIcon')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="iconColor" :label="t('rbac.system.iconColor')">
            <el-color-picker v-model="form.iconColor" show-alpha :predefine="predefineColors" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="groupId" :label="t('rbac.system.group')">
            <el-select v-model="form.groupId" :placeholder="t('rbac.system.group')">
              <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="sysState" :label="t('rbac.system.sysState')">
            <el-radio-group v-model="form.sysState">
              <el-radio value="0">{{ t('rbac.system.disable') }}</el-radio>
              <el-radio value="1">{{ t('rbac.system.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="sysDisplay" :label="t('rbac.system.sysDisplay')">
            <el-radio-group v-model="form.sysDisplay">
              <el-radio value="0">{{ t('rbac.system.hide') }}</el-radio>
              <el-radio value="1">{{ t('rbac.system.display') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('rbac.system.note')">
            <el-input type="textarea" v-model="form.note" :placeholder="t('rbac.system.note')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/rbac-server/rbac/system/get"
    label-width="100px"
    submit-url="/rbac-server/rbac/system/update"
    :title="t('rbac.system.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="sysName" :label="t('rbac.system.sysName')">
            <el-input v-model="form.sysName" :placeholder="t('rbac.system.sysName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="sysIcon" :label="t('rbac.system.sysIcon')">
            <el-input v-model="form.sysIcon" :placeholder="t('rbac.system.sysIcon')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="iconColor" :label="t('rbac.system.iconColor')">
            <el-color-picker v-model="form.iconColor" show-alpha :predefine="predefineColors" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item prop="groupId" :label="t('rbac.system.group')">
            <el-select v-model="form.groupId" :placeholder="t('rbac.system.group')">
              <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="sysState" :label="t('rbac.system.sysState')">
            <el-radio-group v-model="form.sysState">
              <el-radio :value="false">{{ t('rbac.system.disable') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.system.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="sysDisplay" :label="t('rbac.system.sysDisplay')">
            <el-radio-group v-model="form.sysDisplay">
              <el-radio :value="false">{{ t('rbac.system.hide') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.system.display') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('rbac.system.note')">
            <el-input type="textarea" v-model="form.note" :placeholder="t('rbac.system.note')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { delApi, sortApi } from '@/api/rbac/system'
import { listApi } from '@/api/rbac/systemgroup'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { SystemGroupType } from '@/api/rbac/systemgroup/types'

const { t } = useI18n()

//默认颜色
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
])

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  sysDisplay: '1',
  sysState: '1'
})
const addData: FormDataType = {
  sysName: '',
  groupId: '',
  sysIcon: '',
  iconColor: '',
  sysDisplay: '1',
  sysState: '1',
  note: ''
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  sysName: '',
  groupId: '',
  sysIcon: '',
  iconColor: '',
  sysDisplay: '1',
  sysState: '1',
  note: ''
}

//查询定义
const queryFormType: QueryFormType = {
  sysState: {
    value: '',
    queryType: QueryType.EQ
  },
  sysDisplay: {
    value: '',
    queryType: QueryType.EQ
  }
}

const groups = ref<SystemGroupType[]>([])
const loadSystemGroup = async () => {
  const rs = await listApi()
  if (rs.success) {
    groups.value = rs.data
  }
}
loadSystemGroup()

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(id)
    if (rs.success) {
      table.value.load(1)
    }
  })
}
const sort = async (id: string, type: number) => {
  const rs = await sortApi({ id, type })
  if (rs.success) {
    table.value.load()
  }
}
const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
